@import '../../../scss/common/transitions';
$namespace: mooc;
$theme-0-title-active-color: #d5271c;
$theme-1-title-active-color: #e1e1e1;

dl.#{$namespace}-accordion-item {
  margin: 0;
}

.#{$namespace}-accordion {
  display: block;
}



.#{$namespace}-accordion-item {
  &.#{$namespace}-active {
    display: block;

    .#{$namespace}-accordion-title{
      //background: #eeeeee;
      &.#{$namespace}-accordion-block-0 {
        color: $theme-0-title-active-color;
      }
      &.#{$namespace}-accordion-block-1 {
        color: $theme-1-title-active-color;
      }
    }

  }

  &.#{$namespace}-disabled {

  }
}

.#{$namespace}-accordion-item + .#{$namespace}-accordion-item {
  //border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.#{$namespace}-accordion-block-0 {
  margin-left: 1.2rem;
  border-left: 3px solid #c4cbce;
}

dd.#{$namespace}-accordion-block-1 {
  margin: 0;
}

.#{$namespace}-accordion-block-1 {
  background: #4388c8 repeat 0 0 none;
  color: #ffffff;
  &:hover {
    background: #3b72aa repeat 0 0 none;
  }

  .#{$namespace}-accordion-content {
    background: #ededed repeat 0 0 none;
    color: #333333;
  }
}

.#{$namespace}-accordion-title {
  padding: 0.8rem 1rem;
  font-size: 1.6rem;

}

.#{$namespace}-accordion-title{
  &.#{$namespace}-accordion-block-0:hover {
    color: $theme-0-title-active-color;
  }
  &.#{$namespace}-accordion-block-1:hover {
    color: $theme-1-title-active-color;
  }
}

.#{$namespace}-active {
  .#{$namespace}-accordion-block-1 {
    background: #2e323e repeat 0 0 none;
  }
}

.#{$namespace}-accordion-content {
  padding: 0.8rem 1rem 1.2rem;
  font-size: 1.4rem;
  word-wrap: break-word;
}

.#{$namespace}-active .#{$namespace}-accordion-collapse {
  display: block;
}
.#{$namespace}-accordion-collapse {
  // margin-left: 0;
  display: none;
}

.#{$namespace}-accordion-collapsing {
  height: 0;
  //display: block;
  overflow: hidden;
  @include transition(height 0.3s ease-in-out)
}

